<!--
  下载记录抽屉组件
  用于显示数据核对任务的下载记录列表
  遵循CatchAdmin开发规范
-->
<template>
  <el-drawer
    v-model="visible"
    direction="rtl"
    :size="drawerSize"
    :before-close="handleClose"
    class="download-record-drawer"
    :close-on-click-modal="true"
    :modal-append-to-body="false"
    :with-header="false"
  >
    <!-- 自定义头部 -->
    <div class="drawer-header">
      <div class="header-bg"></div>
      <div class="header-content">
        <div class="header-left">
          <div class="header-icon">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div>
            <h2 class="header-title">{{ drawerTitle }}</h2>
            <p class="header-subtitle">共 {{ total }} 条记录</p>
          </div>
        </div>
        <div class="header-right">
          <el-button type="text" @click="handleClose" class="close-btn">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </el-button>
        </div>
      </div>
    </div>
    <!-- 抽屉内容区域 -->
    <div class="flex flex-col h-full pt-0">
      <!-- 表格容器 -->
      <div class="flex flex-col flex-1 min-h-0">
        <!-- 表格区域 -->
        <div class="overflow-hidden flex-1">
          <el-table
            :data="downloadRecords"
            v-loading="loading"
            class="w-full h-full catchtable"
            :height="tableHeight"
            :border="true"
            :size="'default'"
            empty-text="暂无下载记录"
            :header-cell-style="{ background: 'var(--catch-table-header-bg-color)', color: 'var(--el-text-color-primary)', fontWeight: '600' }"
            :cell-style="{ padding: '12px 8px', borderBottom: '1px solid var(--el-border-color-lighter)' }"
          >
            <el-table-column prop="serial_number" label="编号" width="80" align="center" fixed="left" :resizable="false">
              <template #default="scope">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-300">
                  {{ scope.row.serial_number }}
                </span>
              </template>
            </el-table-column>

            <el-table-column prop="create_user_name" label="下载人" width="160" show-overflow-tooltip :resizable="false">
              <template #default="scope">
                <div class="flex items-center">
                  <div class="flex justify-center items-center mr-3 w-8 h-8 rounded-full shadow-sm bg-primary">
                    <span class="text-xs font-bold text-white">
                      {{ scope.row.create_user_name.charAt(0) }}
                    </span>
                  </div>
                  <div>
                    <div class="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
                      {{ scope.row.create_user_name }}
                    </div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">ID: {{ scope.row.create_user_id }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="created_at_ymd" label="下载时间" width="180" :resizable="false">
              <template #default="scope">
                <div class="flex flex-col">
                  <span class="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
                    {{ scope.row.created_at_ymd }}
                  </span>
                  <span class="text-xs font-medium text-primary">
                    {{ scope.row.created_at_his }}
                  </span>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="ip" label="IP" min-width="240" show-overflow-tooltip :resizable="true">
              <template #default="scope">
                <span class="text-sm font-medium text-gray-900 truncate transition-colors dark:text-gray-100 group-hover:text-primary">
                  {{ scope.row.ip }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页区域 -->
        <div v-if="total > 0" class="pt-4 mt-6 border-t border-gray-200 dark:border-gray-700">
          <div class="flex flex-col gap-4 justify-between items-center sm:flex-row">
            <div class="text-sm font-medium text-gray-600 dark:text-gray-300">
              共 <span class="font-bold text-primary">{{ total }}</span> 条记录
            </div>
            <el-pagination
              background
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              class="catch-pagination"
              :pager-count="5"
            />
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import http from '@/support/http'

interface DownloadRecord {
  id: number
  name: string
  download_time: string
  file_name: string
}

interface Props {
  taskId: number | null
  taskName?: string
}

const props = defineProps<Props>()
const visible = defineModel<boolean>({ default: false })

const downloadRecords = ref<DownloadRecord[]>([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 计算表格高度 - 根据数据量动态调整
const tableHeight = computed(() => {
  if (downloadRecords.value.length === 0) return 'auto'
  if (downloadRecords.value.length <= 5) return 'auto'
  return 'calc(100vh - 300px)'
})

// 计算抽屉标题
const drawerTitle = computed(() => {
  if (props.taskName) {
    return `${props.taskName}的下载记录`
  }
  return '下载记录'
})

// 响应式抽屉大小
const drawerSize = computed(() => {
  // 根据屏幕宽度动态调整抽屉大小
  const screenWidth = window.innerWidth
  if (screenWidth < 768) {
    return '90%' // 小屏幕使用90%宽度
  } else if (screenWidth < 1024) {
    return '70%' // 中等屏幕使用70%宽度
  } else {
    return '820px' // 大屏幕使用固定820px宽度
  }
})

// 获取下载记录数据
const fetchDownloadRecords = async () => {
  if (!props.taskId) return

  loading.value = true
  try {
    // TODO: 实际开发时取消注释以下API调用代码
    const response = await http.get(`/dc/download/logs`, {
      page: currentPage.value,
      limit: pageSize.value,
      task_id: props.taskId
    })
    downloadRecords.value = response.data.data
    total.value = response.data.total
  } catch (error) {
    console.error('获取下载记录失败:', error)
    ElMessage.error('获取下载记录失败')
  } finally {
    loading.value = false
  }
}
// 监听弹窗显示状态
watch(
  () => visible.value,
  () => {
    fetchDownloadRecords()
  },
  { immediate: true, deep: true }
)

// 分页大小改变
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  fetchDownloadRecords()
}

// 当前页改变
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  fetchDownloadRecords()
}

// 关闭抽屉
const handleClose = () => {
  visible.value = false
}
</script>

<style scoped>
/* 自定义头部样式 */
.drawer-header {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
  opacity: 0.1;
  z-index: 0;
}

.header-content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
  margin-right: 16px;
  box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.2);
  color: white;
}

.header-icon svg {
  width: 24px;
  height: 24px;
}

.header-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  line-height: 1.4;
}

.header-subtitle {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: var(--el-text-color-regular);
  line-height: 1.4;
}

.close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--el-text-color-regular);
  transition: all 0.3s ease;
}

.close-btn:hover {
  background-color: var(--el-fill-color-light);
  color: var(--el-color-primary);
}

.close-btn svg {
  width: 18px;
  height: 18px;
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  .header-bg {
    background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-dark-2) 100%);
    opacity: 0.15;
  }
  
  .drawer-header {
    border-bottom-color: var(--el-border-color-darker);
  }
}

/* 抽屉样式优化 */
.download-record-drawer :deep(.el-drawer__body) {
  padding: 0;
}

/* 表格边框和样式 */
.download-record-drawer :deep(.catchtable) {
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  overflow: hidden;
}

/* 分页样式与CatchAdmin保持一致 */
.download-record-drawer :deep(.el-pagination) {
  @apply text-sm;
}

/* 表格行悬停效果 */
.download-record-drawer :deep(.catchtable .el-table__row:hover) {
  background-color: var(--el-table-row-hover-bg-color);
}

/* 表格单元格样式 */
.download-record-drawer :deep(.catchtable .el-table__cell) {
  padding: 12px 0;
}

/* 表格头部样式 */
.download-record-drawer :deep(.catchtable .el-table__header-wrapper) {
  border-bottom: 1px solid var(--el-border-color);
}

/* 统计信息卡片样式 */
.bg-card-bg {
  background-color: var(--el-bg-color);
}

.border-border-color {
  border-color: var(--el-border-color);
}

.text-primary {
  color: var(--el-color-primary);
}

.text-primary-dark {
  color: var(--el-color-primary-dark-2);
}

.bg-primary {
  background-color: var(--el-color-primary);
}

.bg-primary-dark {
  background-color: var(--el-color-primary-dark-2);
}
</style>

<style>
/* 全局样式 - 确保表头背景色与CatchAdmin主列表一致 */
.download-record-drawer .catchtable .el-table__header .el-table__cell {
  background: var(--catch-table-header-bg-color) !important;
  background-color: var(--catch-table-header-bg-color) !important;
  color: var(--el-text-color-primary) !important;
}

.download-record-drawer .catchtable .el-table__header tr {
  background: var(--catch-table-header-bg-color) !important;
  background-color: var(--catch-table-header-bg-color) !important;
}

.download-record-drawer .catchtable .el-table__header-wrapper {
  background: var(--catch-table-header-bg-color) !important;
  background-color: var(--catch-table-header-bg-color) !important;
}

.download-record-drawer .catchtable .el-table__header {
  background: var(--catch-table-header-bg-color) !important;
  background-color: var(--catch-table-header-bg-color) !important;
}

/* 表格行样式优化 */
.download-record-drawer .catchtable .el-table__row.even-row {
  background-color: var(--el-table-tr-bg-color);
}

.download-record-drawer .catchtable .el-table__row.odd-row {
  background-color: var(--el-bg-color);
}

/* 分页组件样式优化 */
.download-record-drawer .catch-pagination .el-pagination.is-background .btn-prev,
.download-record-drawer .catch-pagination .el-pagination.is-background .btn-next,
.download-record-drawer .catch-pagination .el-pagination.is-background .el-pager li {
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  color: var(--el-text-color-primary);
}

.download-record-drawer .catch-pagination .el-pagination.is-background .btn-prev:hover,
.download-record-drawer .catch-pagination .el-pagination.is-background .btn-next:hover,
.download-record-drawer .catch-pagination .el-pagination.is-background .el-pager li:hover {
  color: var(--el-color-primary);
}

.download-record-drawer .catch-pagination .el-pagination.is-background .el-pager li.active {
  background-color: var(--el-color-primary);
  color: white;
}

/* 响应式设计 - 小屏幕适配 */
@media (max-width: 768px) {
  .download-record-drawer :deep(.el-drawer) {
    width: 90% !important;
  }

  .download-record-drawer :deep(.el-table) {
    font-size: 12px;
  }

  .download-record-drawer :deep(.el-table__cell) {
    padding: 8px 4px !important;
  }

  .download-record-drawer :deep(.el-pagination) {
    padding: 8px 0;
  }

  .download-record-drawer :deep(.el-pagination .el-pagination__sizes) {
    display: none;
  }

  .download-record-drawer :deep(.el-pagination .el-pagination__jump) {
    display: none;
  }

  .download-record-drawer :deep(.el-pagination .el-pager) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* 响应式设计 - 中等屏幕适配 */
@media (max-width: 1024px) and (min-width: 769px) {
  .download-record-drawer :deep(.el-drawer) {
    width: 70% !important;
  }

  .download-record-drawer :deep(.el-table) {
    font-size: 13px;
  }

  .download-record-drawer :deep(.el-table__cell) {
    padding: 10px 6px !important;
  }
}

/* 响应式设计 - 大屏幕适配 */
@media (min-width: 1025px) {
  .download-record-drawer :deep(.el-drawer) {
    width: 820px !important;
  }
}
</style>
